<template>
  <div class="reserve-form">
    <van-cell-group>
      <van-field
        :model-value="form.reserveDate"
        is-link
        readonly
        label="预约日期"
        @click="showReserveDatePicker = true"
      />

      <!-- <van-popup v-model:show="showReserveDatePicker" position="bottom">
        <van-datetime-picker
          type="date"
          title="选择年月日"
          @confirm="onConfirm"
          @cancel="showReserveDatePicker = false"
        />

      </van-popup> -->

      <van-field
        :model-value="form.teacher"
        is-link
        readonly
        label="辅导预约老师"
        @click="showTeacherPicker = true"
      />

      <TeacherSelect v-model:visible="showTeacherPicker"></TeacherSelect>

      <van-field
        :model-value="form.temporal"
        is-link
        readonly
        label="被辅导对象"
        @click="showTemporalPicker = true"
      />

      <TemporalSelect v-model:visible="showTemporalPicker"></TemporalSelect>
    </van-cell-group>
  </div>

  <van-calendar v-model:show="showReserveDatePicker" @confirm="onConfirm" />
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs } from 'vue'
import TeacherSelect from '../components/TeacherSelect.vue'
import TemporalSelect from '../components/TemporalSelect.vue'
import { useDatePicker } from '/@/use/datePicker'

const {
  showReserveDatePicker,
  form,
  onConfirm,
  showTeacherPicker,
  showTemporalPicker,
} = useForm()

function useForm() {
  const form = reactive({
    reserveDate: '',
    teacher: '',
    temporal: '',
  })

  const showTeacherPicker = ref(false)

  const showTemporalPicker = ref(false)

  const { reserveDate } = toRefs(form)

  const { onConfirm, picker: showReserveDatePicker } =
    useDatePicker(reserveDate)

  return {
    showReserveDatePicker,
    form,
    onConfirm,
    showTeacherPicker,
    showTemporalPicker,
  }
}
</script>

<style lang="less" scoped>
.reserve-form {
}
</style>
